<template>
  <div>
    <Breadcrumb style="padding-bottom: 20px">
      <BreadcrumbItem to="/">图书管理后台</BreadcrumbItem>
      <BreadcrumbItem>图书信息</BreadcrumbItem>
    </Breadcrumb>
    <Modal :model-value="addButton" title="添加图书" footer-hide :closable="false">
      <Form :model="addForm" :label-width="80">
        <FormItem label="书名:">
          <input v-model="addForm.name" placeholder="书名" style="width: 80%" />
        </FormItem>
        <FormItem label="作者:">
          <input v-model="addForm.author" placeholder="作者" style="width: 80%" />
        </FormItem>
        <FormItem label="数量:">
          <input v-model="addForm.num" type="number" placeholder="数量" style="width: 80%" />
        </FormItem>
        <FormItem label="价格:">
          <input v-model="addForm.price" placeholder="价格" style="width: 80%" />
        </FormItem>
        <FormItem label="状态:">
          <Select v-model="addForm.status" style="width: 80%">
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="类型:">
          <Select v-model="addForm.type" style="width: 80%">
            <Option v-for="item in typeList" :value="item.type" :key="item.type">{{ item.type }}</Option>
          </Select>
        </FormItem>
        <FormItem label="头像">
          <Upload
            :action="uploadForm.action"
            :on-success="upload"
            :format="uploadForm.format"
            :max-size="uploadForm.size"
          >
            <Button icon="ios-cloud-upload-outline">Upload files</Button>
          </Upload>
        </FormItem>
      </Form>
      <div class="demo-form-button">
        <Button type="primary" @click="add()">添加</Button>
        <Button type="primary" style="margin-left: 20px" @click="cancel()">取消</Button>
      </div>
    </Modal>

    <Modal :model-value="updateButton" title="修改图书" footer-hide :closable="false">
      <Form :model="updateForm" :label-width="80">
        <FormItem label="书名:">
          <input v-model="updateForm.name" placeholder="书名" style="width: 80%" />
        </FormItem>
        <FormItem label="作者:">
          <input v-model="updateForm.author" placeholder="作者" style="width: 80%" />
        </FormItem>
        <FormItem label="数量:">
          <input v-model="updateForm.num" type="number" placeholder="数量" style="width: 80%" />
        </FormItem>
        <FormItem label="价格:">
          <input v-model="updateForm.price" placeholder="价格" style="width: 80%" />
        </FormItem>
        <FormItem label="状态:">
          <Select v-model="updateForm.status" style="width: 80%" disabled>
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="类型:">
          <Select v-model="updateForm.type" style="width: 80%">
            <Option v-for="item in typeList" :value="item.type" :key="item.type">{{ item.type }}</Option>
          </Select>
        </FormItem>
        <FormItem label="头像">
          <Upload
            :action="uploadForm.action"
            :on-success="upload"
            :format="uploadForm.format"
            :max-size="uploadForm.size"
          >
            <Button icon="ios-cloud-upload-outline">Upload files</Button>
          </Upload>
        </FormItem>
      </Form>
      <div class="demo-form-button">
        <Button type="primary" @click="update()">修改</Button>
        <Button type="primary" style="margin-left: 20px" @click="cancels()">取消</Button>
      </div>
    </Modal>
    <div class="demo-search">
      <Form ref="queryForm" :model="queryForm" inline>
        <FormItem prop="name">
          <Input type="text" v-model="queryForm.name" placeholder="书名">
            <template #prepend>
              <Icon type="ios-person-outline"></Icon>
            </template>
          </Input>
        </FormItem>
        <FormItem prop="author">
          <Input type="text" v-model="queryForm.author" placeholder="作者">
            <template #prepend>
              <Icon type="ios-person-outline"></Icon>
            </template>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleQuery('queryForm')">查询</Button>
        </FormItem>
      </Form>
    </div>
    <div class="demo-add">
      <Button @click="addData()" icon="md-add" type="primary">新增</Button>
    </div>

    <Table border :columns="columns" :data="data"></Table>

    <Page
      :total="total"
      :page-size="size"
      @on-change="changePage"
      :model-value="page"
      show-elevator
      style="padding-top: 20px"
    />

    <GlobalFooter :links="links" :copyright="copyright" />
  </div>
</template>
<script>
import { resolveComponent } from 'vue';
import { getPage } from '@/api/api';
import { selectTypeAll } from '@/api/typeApi';
import { insertAll, queryById, updateBook, deleteBook, changeStatus } from '@/api/bookApi';
export default {
  data() {
    return {
      addButton: false,
      updateButton: false,
      size: 5,
      page: 1,
      total: 0,
      uploadForm: {
        action: process.env.VUE_APP_BASE_API + '/upload/uploadFile',
        format: ['jpg', 'jpeg'],
        size: 10240
      },
      typeList: [{ type: '' }],
      statusList: [
        {
          value: '1',
          label: '启用'
        },
        {
          value: '2',
          label: '禁用'
        }
      ],
      addForm: {
        name: '',
        author: '',
        status: '1',
        num: '',
        price: '',
        type: '',
        image: ''
      },
      updateForm: {
        name: '',
        author: '',
        status: '1',
        num: '',
        price: '',
        type: '',
        image: ''
      },
      columns: [
        {
          title: 'ID',
          key: 'id',
          align: 'center'
        },
        {
          title: '书名',
          key: 'name',
          align: 'center'
        },
        {
          title: '作者',
          key: 'author',
          align: 'center'
        },
        {
          title: '数量',
          key: 'num',
          align: 'center'
        },
        {
          title: '价格',
          key: 'price',
          align: 'center'
        },
        {
          title: '类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '入库时间',
          key: 'createTime',
          align: 'center'
        },
        {
          title: '更新时间',
          key: 'updateTime',
          align: 'center'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                resolveComponent('Button'),
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  onClick: () => {
                    this.$Modal.confirm({
                      title: '状态改变',
                      content: '你确认要改变当前书目的状态吗?',
                      onOk: () => {
                        changeStatus(params.row).then((res) => {
                          if (res) {
                            this.$Message.success('改变成功');
                            window.setTimeout(function () {
                              window.location.reload();
                            }, 1000);
                          } else {
                            this.$Message.error('当前书目正在被借阅,无法改变');
                          }
                        });
                      },
                      onCancel: () => {
                        this.$Message.success('取消成功');
                      }
                    });
                  }
                },
                {
                  default() {
                    return params.row.status == 1 ? '启用' : '禁用';
                  }
                }
              )
            ]);
          }
        },
        {
          title: 'Action',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                resolveComponent('Button'),
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  onClick: () => {
                    this.show(params.row.id);
                  }
                },
                {
                  default() {
                    return '修改';
                  }
                }
              ),
              h(
                resolveComponent('Button'),
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  onClick: () => {
                    this.remove(params.row);
                  }
                },
                {
                  default() {
                    return '删除';
                  }
                }
              )
            ]);
          }
        }
      ],
      data: [
        {
          id: '',
          name: '',
          author: '',
          price: '',
          num: '',
          type: '',
          createTime: '',
          updateTime: '',
          status: ''
        }
      ],
      links: [
        {
          key: '帮助',
          title: '帮助',
          href: 'https://www.iviewui.com',
          blankTarget: true
        },
        {
          key: 'github',
          icon: 'logo-github',
          href: 'https://github.com/view-design/ViewUIPlus',
          blankTarget: true
        },
        {
          key: '条款',
          title: '条款',
          href: '',
          blankTarget: true
        }
      ],
      copyright: 'Copyright © 2022 View Design All Rights Reserved',
      queryForm: {
        name: '',
        author: ''
      },
      ruleInline: {
        user: [{ required: true, message: 'Please fill in the user name', trigger: 'blur' }]
      }
    };
  },
  methods: {
    addData() {
      this.addButton = true;
      this.addForm = this.$options.data().addForm;
      selectTypeAll({}).then((res) => {
        this.typeList = res;
      });
    },
    upload(res) {
      this.addForm.image = res.url;
      this.updateForm.image = res.url;
    },
    add() {
      this.addButton = false;
      insertAll(this.addForm).then((res) => {
        this.$Message.success(res);
        window.setTimeout(function () {
          window.location.reload();
        }, 1000);
      });
    },
    update() {
      updateBook(this.updateForm).then((res) => {
        this.$Message.success(res);
        window.setTimeout(function () {
          window.location.reload();
        }, 1000);
      });
      this.updateButton = false;
    },
    cancel() {
      this.addButton = false;
    },
    cancels() {
      this.updateButton = false;
    },
    show(id) {
      queryById({ id: id }).then((res) => {
        this.updateForm = res;
        this.updateButton = true;
      });
      selectTypeAll({}).then((res) => {
        this.typeList = res;
      });
    },
    remove(book) {
      this.$Modal.confirm({
        title: '删除',
        content: '你确认要删除吗?',
        onOk: () => {
          deleteBook(book).then((res) => {
            if (res) {
              this.$Message.success('删除成功');
              window.setTimeout(function () {
                window.location.reload();
              }, 1000);
            } else {
              this.$Message.error('当前存着未归还书目,无法删除');
            }
          });
        },
        onCancel: () => {
          this.$Message.success('取消删除');
        }
      });
    },
    changePage(page) {
      getPage({ page: page, size: this.size, name: this.queryForm.name, author: this.queryForm.author }).then((res) => {
        this.data = res.date;
        this.total = res.total;
      });
    },
    handleQuery(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          getPage({
            page: this.page,
            size: this.size,
            name: this.queryForm.name,
            author: this.queryForm.author
          }).then((res) => {
            this.data = res.date;
            this.total = res.total;
          });
        } else {
          this.$Message.error('Fail!');
        }
      });
    }
  },
  created() {
    getPage({ page: this.page, size: this.size, name: '', author: '' }).then((res) => {
      this.data = res.date;
      this.total = res.total;
    });
  }
};
</script>

<style>
.demo-search {
  text-align: center;
}
.demo-add {
  margin-bottom: 20px;
  text-align: center;
}
.demo-form-button {
  text-align: center;
}
</style>
